<template>
	<view>
		<view class="button-container">
			<button class="button cancel-button" @click="goBack">取消</button>
			<button class="button confirm-button">确认</button>
		</view>
		<view class="containerexample">
			<uni-forms ref="baseForm" :modelValue="baseFormData" label-position="top"
				style="height: 300rpx; width: 300rpx;">
				<uni-forms-item>
					<uni-file-picker :image-styles="imageStyles" v-model="imageValue" fileMediatype="image" mode="grid"
						@select="select" limit="1"></uni-file-picker>
				</uni-forms-item>
			</uni-forms>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageStyles: {
					height: 150,
					width: 150,
					border: {
						color: "#B0B0B0",
						width: 2,
						style: 'dashed',
						radius: '2px',
					},
					backgroundColor:"#B0B0B0"
				}
			}
		},
		methods: {
			goBack() {
			  // 返回逻辑，例如返回上一页
			  uni.navigateBack();
			},
			//图片上传
			select(e) {
				const tempFilePaths = e.tempFilePaths;
				//获取图片临时路径
				const imgUrl = tempFilePaths[0]
				uni.uploadFile({
					//图片上传地址
					url: 'https://xxx.xxx.com/api/uploadpic/',
					filePath: imgUrl,
					//上传名字，注意与后台接收的参数名一致
					name: 'imgUrl',
					//设置请求头
					header: {
						"Content-Type": "multipart/form-data"
					},
					//请求成功，后台返回自己服务器上的图片地址
					success: (uploadFileRes) => {
						console.log('uploadFileRes', JSON.parse(uploadFileRes.data));
						//处理数据
						const path = JSON.parse(uploadFileRes.data)
						//赋值，前端渲染
						this.baseFormData.photo = path.imgUrl
					}
				});
			},
		}
	}
</script>

<style>
	.containerexample{
		margin-left:200rpx;
		
	}
	.button-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 按钮之间的间距 */
		margin: 20rpx;
		/* 外边距 */
	}

	.button {
		flex: 1;
		/* 按钮均分空间 */
		padding: 10rpx;
		/* 内边距 */
		border: none;
		/* 去掉边框 */
		border-radius: 5rpx;
		/* 圆角 */
		font-size: 16px;
		/* 字体大小 */
		cursor: pointer;
		/* 鼠标悬停时显示手形光标 */
		margin: 0 20rpx;
		/* 按钮之间的间距 */
		width: 100rpx;
	}

	.cancel-button {
		color: black;
		/* 白色字体 */
	}

	.confirm-button {
		color: #297BF6;
		/* 白色字体 */
	}
</style>